@import "variables";

lesson-comment-item{
  .comment-item-box{
    .comment-item{
      height: pxTorem(130);
      box-sizing: border-box;
      padding: pxTorem(20) pxTorem(64) pxTorem(20) pxTorem(24);
      &:after{
        right: pxTorem(24);
      }
      .right{
        position: relative;
        &:after{
          position: absolute;
          right: 0px;
          top: -3px;
          display: block;
          content: '';
          width: pxTorem(12);
          height: pxTorem(12);
          border-radius: pxTorem(12);
          background: color($h5, c11);
        }
      }
    }
  }
}
.left{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 80%;
  height: 100%;
  .lesson-name-box{
    .lesson-name{
      font-size: standard($f, f2);
      color: color($h5, c2);
      @include over-ellipsis;
      &.short{
        max-width: 55%;
      }
    }
    i{
      display: inline-block;
      margin-left: pxTorem(10);
      font-size: standard($f, f8);
      border-radius: 4px;
      padding: 1px 5px;
    }
    .leave{
      color: color($h5, c15);
      border: 1px solid color($h5, c15);
    }
    .hasPinClass{
      color: color($h5, c5);
      border: 1px solid color($h5, c5);
    }
    .notPinClass{
      color: color($h5, c1);
      border: 1px solid color($h5, c1);
    }
  }
  .lesson-time{
    font-size: standard($f, f5);
    color: color($h5, c4);
  }
}

